<template>
	<scroll-view class="category" scroll-y @scrolltolower="reloadData">
		<view class="category_title">
				<view class="title">
					<view class="currentTitle">
							<uni-segmented-control :current="current" :values="items.map(v => v.title)" @clickItem="onClickItem" style-type="text" active-color="#d4237a"></uni-segmented-control>
					</view>
				</view>
				<view class="iconfont icon-search" @click="search"></view>
		</view>
		<view class="category_content">
		    <view v-if="current === 0">
				<view class="new_category">
					<view class="new_img" v-for="(item,index) in msgData"  :key="index">
						<go-detail :list="msgData" :index="index">
							<view class="imgcontent">
								<image :src="item.thumb" mode="aspectFill"></image>
							</view>
						</go-detail>
					</view>
				</view>
		    </view>
		    <view v-if="current === 1">
				<view class="new_category">
					<view class="new_img" v-for="(item,index) in msgData"   :key="index">
						<go-detail>
							<view class="imgcontent">
								<image :src="item.thumb" mode="aspectFill"></image>
							</view>
						</go-detail>
					</view>
				</view>
		    </view>
		</view>
	</scroll-view>
</template>

<script>
	import {uniSegmentedControl } from '@dcloudio/uni-ui'
	import {goDetail} from '../commpoent/goDetail.vue'
	export default {
		components:{
			uniSegmentedControl,
			goDetail
		},
		data() {
			return {
				items: [{title:'最新'}, {title:'热门'}],
				current: 0,
				id:'',
				params:{
					limit:30,
					skip:0,
					order:'new'
				},
				msgData:[]
			};
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			uni.setNavigationBarTitle({
				title:'图片分类'
			})
		},
		mounted(){
			this.getList()
		},
		methods:{
			onClickItem(e) {
			   if (this.current !== e.currentIndex) {
				   this.current = e.currentIndex;
			   }else{
				   return
			   }
			   this.msgData = []
				if(this.current === 0){
					this.params = {
					limit:30,
					skip:0,
					order:'new'
				}
				}else{
					this.params = {
					limit:30,
					skip:0,
					order:'hot'
				}
				}
				this.getList()
			},
			getList(){
				this.request({
					url:`http://157.122.54.189:9088/image/v1/vertical/category/${this.id}/vertical`,
					data:this.params
				}).then(res =>{
					this.msgData = [...this.msgData,...res.data.res.vertical]
					console.log(res.data.res.vertical)
			
				})
			},
			reloadData(){
				this.params.skip = this.params.skip + 30
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
.category{
	height: calc(100vh - 36px);
	.category_title{
		.title{
			position: relative;
			.currentTitle{
				width:60%;
				margin: 0 auto;
			}
		}
		.icon-search{
			position: absolute;
			top:10px;
			right:6%;
		}
	}
	.category_content{
		.new_category{
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			.new_img{
				width: 33.33%;
				height: 400rpx;
				image{
					width: 100%;
					border: 5rpx solid #fff;
					height: 100%;
				}
			}
		}
	}
	.imgcontent{
		height: 400rpx;
	}
}
</style>
